<template>
  <div class="app-container">
    <!-- <button @click="clickButtonTwo">点击开始录制</button>
    <button @click="clickButtonThree">点击结束录音</button>
    <div class="dataList">
      <div v-for="item in logs" :key="item.idx">
        <template v-if="item.res">
          {{ intp(item.res.rec.set.bitRate, 3) }}kbps
          {{ intp(item.res.rec.set.sampleRate, 5) }}hz 编码{{
            intp(item.res.blob.size, 6)
          }}b [{{ item.res.rec.set.type }}]{{ intp(item.res.duration, 6) }}ms
          <button @click="recdown(item.idx)">下载</button>
          <button @click="recdown64(item.idx)">翻译</button>
        </template>
      </div>
    </div> -->
    <embed id="em_player" :src="fileName" />
    <p>Listening</p>
    <div class="answer-list">
      <div class="list-item" v-for="(item,index) in answerList" :key="index">
        <input type="checkbox" name="answer" :value="item" v-model="answerVal"><span>{{item}}</span>
      </div>
    </div>
    <button @click="toNext">Listen</button>
    
  </div>
</template>
<script>
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import { recReq, recStart } from "../../utils/video";
import RecordApp from "recorder-core/src/app-support/app";
import router from "../../router";
import AnswerList from "../../assets/answerList.json"
import {localSet,localGet} from '../../utils/index'
export default defineComponent({
  setup() {
    onMounted(()=>{
      choseFile()
    })
    const state = reactive({
      rec: false,
      logs: [],
      answerList: [
        "コップ ",
        "コープ "
      ],
      fileName: '/sound/man/data1-1.wav',
      answerVal: [],
      rightVal: ""
    });
    const clickButtonOne = () => {
      state.rec = true;
      recReq();
    };
    const clickButtonTwo = () => {
      recStart(state.rec);
    };
    const clickButtonThree = () => {
      if (!state.rec || RecordApp.Current) {
        console.log("停止失败,未请求权限");
      }
      RecordApp.Stop(
        function (blob, duration) {
          pushLogs("已录制", "", {
            blob: blob,
            duration: duration,
            rec: RecordApp.GetStopUsedRec(),
          });
        },
        function (msg) {
          console.log(msg);
        }
      );
      state.rec = false;
    };
    const recdown = (idx) => {
      var o = state.logs[idx];
      o.down = (o.down || 0) + 1;
      o = o.res;
      var name =
        "rec-" +
        o.duration +
        "ms-" +
        (o.rec.set.bitRate || "-") +
        "kbps-" +
        (o.rec.set.sampleRate || "-") +
        "hz." +
        (o.rec.set.type || (/\w+$/.exec(o.blob.type) || [])[0] || "unknown");
      var downA = document.createElement("A");
      downA.href = (window.URL || webkitURL).createObjectURL(o.blob);
      downA.download = name;
      downA.click();
    };
    const recplay = (idx) => {
      console.log(idx);
    };
    const recdown64 = (idx) => {
      console.log(idx);
      let o = state.logs[idx];
      console.log(o);
      let reader = new FileReader();
      reader.onloadend = function () {
        o.down64Val = reader.result;
        console.log(reader.result);
        sendNet(reader.result);
        console.log(o);
      };
      reader.readAsDataURL(o.res.blob);
    };

    const pushLogs = (msg, color, res) => {
      state.logs.push({
        idx: state.logs.length,
        msg: msg,
        color: 1,
        res: res,
        playMes: "",
        down: 0,
        down64Val: "",
      });
    };
    const intp = (s, len) => {
      s = s == null ? "-" : s + "";
      if (s.length >= len) return s;
      return ("_______" + s).substr(-len);
    };
    const toNext=()=>{
      let array=localGet("listenList")||[]
      let item={
        isRight: state.answerVal[0]===state.rightVal?'正确':'错误',
        choose: state.answerVal[0]
      }
      array.push(item)
      localSet("listenList",array)
      if(window.localStorage.getItem("count")>AnswerList.data.length){
        router.push("/speakinganswer")
      }else{
        if(state.rightVal===state.answerVal[0]){
          router.push({path:'/wave'})
        }else{
          router.push({path:'/error'})
        }
      }
      // console.log(state.answerVal)
      // router.push({path:'/play',query: state.answerVal})
    }
    const choseFile=()=>{
      let array=localGet("questionList")
      var subStr=new RegExp(window.localStorage.getItem("sex"))
      var tmpStr=window.localStorage.getItem("sex")==='man'?'man':'woman'
      let item=window.localStorage.getItem("dataItem")
      let o=array[item]
      state.answerList=o.answerList
      state.fileName=o.fileUrl.replace(tmpStr,subStr)
      state.rightVal=o.answerList[o.answer]
    }
    const toSpeaking=()=>{
      router.push("/speaking")
    }
    return {
      ...toRefs(state),
      clickButtonOne,
      toSpeaking,
      clickButtonTwo,
      clickButtonThree,
      recdown,
      toNext,
      choseFile,
      intp,
      recplay,
      recdown64,
    };
  },
});
</script>
<style scoped>
.answer-list{
  display: flex;
  flex-direction: column;
}
</style>

